<template>
  <div>
    <h1>非空断言</h1>
    <input type="text" ref="target">
  </div>
</template>

<script setup lang="ts">
/**
 * input框 赋值
 * input元素.value = xxx
 */
import { onMounted, ref } from 'vue';


const target = ref<null | HTMLInputElement>(null)
onMounted(() => {
  const inputEl = target.value
  // 用之前的元素类型断言也没有任何问题，因为此时的input没有v-if的逻辑肯定是存在的
  // const inputEl = target.value as HTMLInputElement
  // 可选链不能赋值
  // inputEl?.value = '帅峰'
  // 类型守卫
  // if (inputEl) {
  //   inputEl.value = '帅峰'
  // }
  // 非空断言 在你想访问的属性前面，ts判断可能为空
  // 如果你觉得肯定不为空，可以在可能为空的属性后面加感叹号（ts的语法） 
  // 此时感叹号前面的东西，你断言就是非空
  // inputEl!.value = '帅峰'
  inputEl!.value = '111'
})

// 可选属性
type Student = {
  study?(): void
}
let s1: Student = {
  study(){}
}
s1.study!()
// 以下代码会有问题，因为s1没有study方法，你不能非空断言
// s1.study!()
let s2: Student = {
  study() {

  }
}
// 只要是断言一定要自己确定是可以的，如果不可以，ts也以你为主 到时候运行时会报错的
s2.study!()

</script>

<style scoped></style>
